<template>
  <div class="risk-analysis">
    <h3>
      <el-icon><WarningFilled /></el-icon>
      风险内容分析
    </h3>
    <div class="risk-card">
      <!-- 风险等级 + 类型：水平两端对齐 -->
      <div class="risk-header">
        <div
          class="risk-level"
          :class="riskData.riskLevel"
        >
          {{ riskData.riskLevel }}
        </div>
        <div class="risk-type">
          类型： <div class="risk-type2">
          {{ riskData.riskType }}
        </div>
        </div>

      </div>
      <!-- 命中关键词：与等级垂直排列 -->
      <div class="risk-keyword">
        命中关键词：
        <span class="risk-keyword2">
          {{ riskData.keywords }}
        </span>
      </div>
    </div>
    <!-- 命中话术 -->
    <div class="hit-script">
      <span class="hit-script-label">命中话术：</span>
      <span class="hit-script-content">
        {{ riskData.hitScripts }}
      </span>
    </div>
    <!-- 报备话术 -->
    <div class="report-script">
      <div class="label">
        <el-icon><ChatDotRound /></el-icon>
        报备话术：
      </div>
      <a class="label2" href="javascript:;">
        {{ riskData.reportScripts }}
      </a>
    </div>
  </div>
</template>

<script setup  lang="ts">
import { defineProps } from 'vue'

interface RiskData {
  riskLevel: '风险事件' | '正常事件';
  riskType: string
  keywords: string
  hitScripts: string
  reportScripts: string
}

// 修正 Props 定义：直接绑定 RiskData 类型
defineProps<{
  riskData: RiskData; // 必传风险数据
}>()
</script>

<style lang="scss" scoped>
.risk-analysis {
  padding: 20px;
  border-radius: 8px;
}

h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px; // 图标与文字间距
}

/* 风险卡片：等级 + 类型 + 关键词 */
.risk-card {

  background-color: #eef1f7;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  //min-height: 200px;
}

/* 等级 + 类型：水平两端对齐 */
.risk-header {
  display: flex;
  justify-content: space-between; // 核心：两端对齐
  align-items: center;            // 垂直居中
  margin-bottom: 20px;            // 与关键词区拉开距离
}


/* 风险类型（右侧文字） */
.risk-type {
  display: flex;
  color: #333;
  font-size: 12px;
}

/* 风险类型（右侧文字） */
.risk-type2 {
  color: #f56c6c;
  font-size: 12px;
  font-weight: bold;
}

/* 命中关键词：文字 + 背景区 */
.risk-keyword {
  font-size: 14px;
  margin-top: 20px; // 与等级区拉开距离
  }
.risk-keyword2 {
  background-color: #fdf6ec; // 关键词背景色（与风险事件标签呼应）
  padding: 6px 10px;         // 内边距，增强包裹感
  border-radius: 4px;        // 圆角
  margin-left: 6px;          // 与前面文字拉开距离
  font-size: 12px;
}


/* 命中话术 */
.hit-script {
  margin-bottom: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column; // 子元素垂直排列（user 在 top，content 在 bottom）
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 15px;
}
.hit-script-label {
  margin-bottom: 15px;
  font-weight: bold;
  color: #333;
}
.hit-script-content {
  margin-bottom: 15px;
  color: #666;
  margin-left: 6px;
  background-color: #eef1f7;
  border-radius: 8px;
}

.report-script {
  margin-bottom: 10px;
  // 核心：开启flex布局，让对话框和按钮横向排列
  display: flex;
  justify-content: space-between; // 子元素两端对齐（左：user-content-wrapper，右：record-status）
}

.label {
  font-weight: bold;
  font-size: 16px;
}

.label2 {
  margin-left: 10px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

/* 风险等级（标签化） */
.risk-level {
  padding: 4px 10px;    // 增大点击区域，更美观
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-width: 80px;      // 保证标签宽度一致
}

// 状态颜色（复用原有逻辑）
.正常事件 {
  background-color: #e1f3d8;
  color: #67c23a;
}
.风险事件 {
  background-color: #fdf6ec;
  color: #e6a23c;
}
</style>
